<section class="component">
  <h3 id="listview">ListView (table)</h3>
  <div>
    <blockquote>
      With a list view, users can view and interact with a collection of data
      objects, using either single selection or multiple selection.
      <footer>
        &mdash;
        <a
          href="https://learn.microsoft.com/en-us/windows/win32/uxguide/ctrl-list-views"
          >Microsoft Windows User Experience - List View</a
        >
      </footer>
    </blockquote>

    <p>
      Currently, the ListView is only implemented as the Details view, which
      styles tables.
    </p>

    <%- example(`
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Date Taken</th>
          <th class="highlighted indicator">Tags</th>
          <th>Size</th>
          <th>Rating</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Toco Toucan</td>
          <td>6/24/2005 12:22 PM</td>
          <td>Sample; Wildlife</td>
          <td>113 KB</td>
          <td>* * * * *</td>
        </tr>
        <tr class="highlighted">
          <td>Dock</td>
          <td>6/22/2005 8:17 PM</td>
          <td>Sample; Ocean</td>
          <td>310 KB</td>
          <td>* * * * *</td>
        </tr>
        <tr>
          <td>Autumn Leaves</td>
          <td>11/4/2005 6:12 PM</td>
          <td>Sample; Landscape</td>
          <td>270 KB</td>
          <td>* * * * *</td>
        </tr>
      </tbody>
    </table>
    `) %>

    <p>Here's another example showcasing advanced usage, for example:</p>
    <ul>
      <li>
        The handling of long text (using the <code>width</code> property of the
        table to limit the width)
      </li>
      <li>
        Using the <code>has-shadow</code> class to add a shadow to the table
      </li>
      <li>
        Flipping the column header sort indicator by adding the
        <code>up</code> class
      </li>
      <li>
        Changing text alignment using the <code>text-align</code> property
      </li>
      <li>
        The <code>highlighted</code> column header style without sort indicator
        (I didn't want to add another table just for that)
      </li>
    </ul>
    <%- example(`
    <table class="has-shadow" style="width: 460px">
      <thead>
        <tr>
          <th>Name</th>
          <th>Original Location</th>
          <th class="highlighted">Date deleted</th>
          <th>Size</th>
          <th class="highlighted indicator up">Type</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>contents_files</td>
          <td>D:\\Users\\user\\Documents\\contents_files</td>
          <td>3/29/2007 12:00 AM</td>
          <td style="text-align: right">4 KB</td>
          <td>File Folder</td>
        </tr>
        <tr>
          <td>Windows Vista User Experience Guidelines</td>
          <td>
            D:\\Users\\user\\Documents\\Windows Vista User Experience Guidelines
          </td>
          <td>3/29/2007 12:00 AM</td>
          <td style="text-align: right">0 KB</td>
          <td>File Folder</td>
        </tr>
        <tr>
          <td>AutoRecovery save of Document.asd</td>
          <td>D:\\Users\\user\\Documents\\AutoRecovery save of Document.asd</td>
          <td>3/23/2007 12:00 AM</td>
          <td style="text-align: right">27 KB</td>
          <td>ASD File</td>
        </tr>
        <tr>
          <td>AutoRecovery save of Tree Views.asd</td>
          <td>
            D:\\Users\\user\\Documents\\AutoRecovery save of Tree Views.asd
          </td>
          <td>3/13/2007 12:00 AM</td>
          <td style="text-align: right">693 KB</td>
          <td>ASD File</td>
        </tr>
        <tr>
          <td>contents</td>
          <td>D:\\Users\\user\\Documents\\contents</td>
          <td>3/29/2007 12:00 AM</td>
          <td style="text-align: right">2 KB</td>
          <td>HTML Document</td>
        </tr>
      </tbody>
    </table>
    `) %>
  </div>
</section>
